<template>
  <div
  class="login-page"
  >
  <el-card class="box-card">
      <div slot="header" class="clearfix" style="ext-align: center;">
        <span class="login-title">oa系统</span>
      </div>
      <div class="login-form">
        <el-form :model="form" :rules="loginRules" ref="loginForm">
          <el-form-item prop="userName">
            <el-input type="text" v-model="username" auto-complete="off" placeholder="请输入用户名">
              <template #prepend><el-icon><User /></el-icon></template>
            </el-input>
          </el-form-item>
          <el-form-item prop="passWord">
            <el-input type="password" v-model="password" auto-complete="off" show-password placeholder="请输入密码">
              <template #prepend><el-icon><Key /></el-icon></template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button style="width:100%;" type="primary" @click="submit" :loading="loading">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { reactive, toRefs, ref } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { login } from "@/api/index";
const redirect = ref(undefined);
const store = useStore();
const router = useRouter();
const user = reactive({
  username: 'admin',
  password: '123456',
});

const { username, password } = toRefs(user);

const submit = () => {
  store.dispatch("user/login", user).then(() => {
    router.push({ path: redirect.value || "/" });
  });
};

</script>

<style >
.login-page{
  background-image: linear-gradient(180deg, #2af598 0%, #009efd 100%);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-title{
  font-size: 20px;
}

.box-card {
  width: 375px;
}
</style>